/**
* 功能使用
*/

<template>
    <div class="function-use-content">
        <div class="use-bottom">
            <el-row style="width: calc(100% + 20px);" :gutter="20">
                <el-col :span="12">
                    <div class="device-content">
                        <div class="title">
                            <span class="span-1">APP功能使用数据</span>
                            <div class="table-box" v-if="functionUserData.modeDataList && functionUserData.modeDataList.length > 0">
                                <el-table
                                        :data="functionUserData.modeDataList"
                                        stripe
                                        height="300"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="Function_name"
                                            label="功能">
                                    </el-table-column>
                                    <el-table-column
                                            prop="Function_PV"
                                            sortable
                                            label="使用次数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="Function_UV"
                                            sortable
                                            label="使用人数">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="device-content">
                        <div class="title">
                            <span class="span-1">APP使用时段\时长</span>
                            <div class="table-box" v-if="timeList && timeList.length > 0">
                                <el-table
                                        :data="timeList"
                                        stripe
                                        height="300"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="Time"
                                            sortable
                                            label="时间段"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="Num_of_active_users"
                                            sortable
                                            label="平均在线人数"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="average_use_duration_by_user"
                                            sortable
                                            label="平均在线时长">
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
export default {
  created () {
  },
  props: {
    functionUserData: {
      type: Object
    }
  },
  watch: {
    'functionUserData.timeDataList' (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          this.initPage(now)
        })
      }
    }
  },
  data () {
    return {
      timeList: []
    }
  },
  methods: {
    initPage (data) {
      let activeHourList = data.activeHourList
      let averageOnlineDuration = data.averageOnlineDuration
      this._.each(activeHourList, (item) => {
        let _item = this._.find(averageOnlineDuration, { Time: item.Time })
        let obj = {
          Time: item.Time,
          Num_of_active_users: item.Num_of_active_users,
          average_use_duration_by_user: _item.average_use_duration_by_user
        }
        this.timeList.push(obj)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .function-use-content{
        .device-content{
            @include device-content;
        }
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
        .use-bottom{
            display: flex;

        }
        .table-box{
            margin-top: 20px;
        }
    }
</style>
